<template>
    <el-upload
        v-loading="loading"
        v-model:file-list="fileList"
        :disabled="disabled"
        :accept="fileType"
        :show-file-list="false"
        :http-request="handleHttpUpload"
        :before-upload="beforeUpload">
        <slot name="upload-btn">
            <div v-if="fileList.length === 0" class="upload-btn d-flex ai-center jc-center flex-column" :style="{ width: `${width}px`, height: `${height}px` }">
                <ft-icon class="upload-icon auxiliary-color" name="el-icon Plus" size="36"></ft-icon>
                <span v-if="uploadBtnText" class="upload-btn-text">{{ uploadBtnText }}</span>
            </div>
            <div v-else class="pos-relative file-show" :class="showAction ? 'upload-show' : ''" :style="{ width: `${width}px`, height: `${height}px` }">
                <img :src="fileList[0].url" alt="" class="w100 h100">
                <div class="upload-show-action">
                    <span>替换</span>
                    <span @click.stop="handleDelFile">删除</span>
                </div>
            </div>
        </slot>
    </el-upload>
</template>
<script setup>
import { uploadApi } from "@/api/modules/app";
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    showAction: {
        type: Boolean,
        default: true
    },
    limit: {
        type: Number,
        default: 1
    },
    fileType: {
        type: String,
        default: 'image/*'
    },
    width: {
        type: String,
        default: '130'
    },
    height: {
        type: String,
        default: '130'
    },
    uploadBtnText: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String,
        default: ''
    }
})
const fileList = ref([])
watch(() => props.modelValue, (val) => {
    fileList.value = val ? [{ url: val, uid: val + '-1', name: 'avatar' }] : []
}, { immediate: true })
const { proxy } = getCurrentInstance();
// 上传前的钩子函数
const beforeUpload = (file) => {
    const fileType = file.type;
    if (!fileType.startsWith('image/')) {
        proxy.$modal.msgError('请上传图片文件')
        return false
    }
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
        proxy.$modal.msgError('图片大小不能超过 2MB!')
        return false
    }
    if (props.limit === 1 && fileList.value.length > 0) {
        fileList.value = []
    }
    return true
}
// 上传文件
const loading = ref(false)
const emits = defineEmits(['update:modelValue', 'uploadSuccess'])
const handleDelFile = () => {
    fileList.value = []
    emits('update:modelValue', '')
}
const handleHttpUpload = async({file}) => {
    try {
        loading.value = true
        const formData = new FormData()
        formData.append('file', file);
        const { data } =await uploadApi(file);
        fileList.value =[{ url: data.url, uid: file.uid, name: file.name }]
        emits('update:modelValue', fileList.value[0].url)
        emits('uploadSuccess')
    } finally {
        loading.value = false;
    }
}
</script>

<style lang="scss" scoped>
.upload-btn {
    background-color: #F5F7F8;
    border: 2px solid #F1F1F1;
    padding: 27px;
    box-sizing: border-box;
    .upload-btn-text {
        color: $auxiliary-color;
        font-size: 18px;
        font-weight: 500;
    }
}
.upload-show-action {
    display: none;
}
.upload-show:hover .upload-show-action{
    display: block;
    box-sizing: border-box;
    position: absolute;
    bottom: 4px;
    left: 11px;
    right: 11px;
    background-color: rgba(51,51,51,.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 1002;
    transition: all .3s ease;
    span {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }
    &::after {
        content: '|';
        display: inline-block;
        color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>